<template>
  <div class="dashboard">
    <div class="topCls">
      <div>
        <CoreStats />
      </div>
      <div>
        <OngoingVote />
      </div>
      <div>
        <TotalParticipation />
      </div>
      <div>
        <HotVoteTop1Card />
      </div>
    </div>
    <div class="topCls2">
      <div>
        <VoteStatusChart />
      </div>
      <div><VoteOptionPieChart /></div>
    </div>
    <div class="topCls3">
      <div><VoteTrendChart /></div>
      
    </div>
 <div class="topCls3">
      <div>
        <HotVoteTop5Chart />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import HotVoteTop1Card from "@/components/business/HotVoteTop1Card.vue";
import CoreStats from "@/components/business/CoreStats.vue";
import OngoingVote from "@/components/business/OngoingVote.vue";
import TotalParticipation from "@/components/business/TotalParticipation.vue";
import VoteStatusChart from "@/components/business/VoteStatusChart.vue";
import HotVoteTop5Chart from "@/components/business/HotVoteTop5Chart.vue";
import VoteTrendChart from "@/components/business/VoteTrendChart.vue";
import VoteOptionPieChart from "@/components/business/VoteOptionPieChart.vue";
</script>

<style scoped>
.topCls {
  display: flex;
  padding: 0;
  box-sizing: border-box;
  & > div {
    flex: 1;
    margin: 10px;
  }
}
.topCls2 {
  display: flex;
  & > div {
    width: 50%;
    margin: 15px 0px 10px 25px;
    box-sizing: border-box;
  }
}
.topCls3 {
  display: flex;
  & > div {
    width: 100%;
    margin: 15px 0px 10px 25px;
    box-sizing: border-box;
  }
}
</style>
